<template>
  <div v-if="badgeNumber.length > 0" class="bg-mask-5 h-full">
    <div class="text-18px font-medium color-sup py-12px pl-22px">
      全部商品 {{ cart.totalPieces }}
    </div>
    <div>
      <!-- <div class="flex items-center justify-between category-item-title h-48px px-22px">
        <div class="flex items-center justify-between cursor-pointer">
          <div><img :src="clearCart" alt="" /></div>
          <div class="color-white-opacity-6 text-14px ml-8px" @click="clear">清空购物车</div>
        </div>
      </div> -->
      <div
        class="flex text-14px color-white-opacity-6 mb-20px px-22px font-weight-350 h-55px items-center bg-mask-3"
      >
        <div class="mr-8px">
          <n-checkbox v-model:checked="allChecked" :indeterminate="cart.partChecked" />
        </div>
        <div class="w-28px">全选</div>
        <div class="text-center w-274px">商品</div>
        <div class="flex-1 text-center">单价</div>
        <div class="w-78px text-center">数量</div>
        <div class="flex-1 text-center">总价</div>
        <div class="flex-1 text-center">操作</div>
      </div>
      <div
        v-for="item in cart.getskus"
        :key="item.id"
        class="flex px-22px mb-22px font-weight-350 items-center"
      >
        <div class="mr-36px">
          <n-checkbox
            :checked="item.selected"
            :default-checked="item.selected"
            @update-checked="(v) => cart.updateCheck(item, v)"
          />
        </div>
        <div class="flex-1 text-left flex">
          <div class="w-72px h-72px"><img :src="item.url" class="w-full h-full" alt="" /></div>
          <div class="ml-12px w-190px">
            <p class="text-14px text-white leading-20px mb-11px">
              <n-ellipsis style="max-width: 190px">
                {{ item.name }}
              </n-ellipsis>
            </p>
            <p class="text-12px color-white-opacity-6 leading-17px">
              <n-ellipsis style="max-width: 190px">
                {{ item.number }}份、{{
                  JSON.parse(item.combination || '[]').reduce(
                    (prev, cur) => (prev += cur.value),
                    ''
                  )
                }}
              </n-ellipsis>
            </p>
          </div>
        </div>
        <div class="flex-1 text-center text-14px text-white leading-20px">￥{{ item.price }}</div>
        <div class="w-78px text-center">
          <calculate v-model="item.number" />
        </div>
        <div class="flex-1 text-center color-sup font-medium">￥{{ item.price * item.number }}</div>
        <div class="flex-1 text-center">
          <div
            class="color-white-opacity-6 text-14px leading-20px cursor-pointer"
            @click="cart.delete(item)"
          >
            删除
          </div>
        </div>
      </div>
      <div
        v-for="item in cart.getComboSkus"
        :key="item.id"
        class="flex px-22px mb-22px font-weight-350 items-center"
      >
        <div class="mr-36px">
          <n-checkbox
            :checked="item.selected"
            :default-checked="item.selected"
            @update-checked="(v) => cart.updateComboCheck(item, v)"
          />
        </div>
        <div class="flex-1 text-left flex">
          <div class="w-72px h-72px"><img :src="item.img?.[0]" class="w-full h-full" alt="" /></div>
          <div class="ml-12px w-190px">
            <p class="text-14px text-white leading-20px mb-4px">
              <n-ellipsis style="max-width: 190px">
                {{ item.name }}
              </n-ellipsis>
            </p>
            <div class="text-12px color-white-opacity-6 leading-17px">
              <div>{{ item.number }}份</div>
              <div class="flex items-start mt-6px w-190px">
                <n-ellipsis style="max-width: 190px">
                  {{
                    item.skus.reduce((prev, sku, index) => {
                      prev +=
                        (index !== 0 ? ' | ' : '') +
                        sku.name +
                        '-' +
                        JSON.parse(sku.combination || '[]').reduce(
                          (prev, cur) => (prev += cur.value),
                          ''
                        )
                      return prev
                    }, '')
                  }}
                </n-ellipsis>
              </div>
            </div>
          </div>
        </div>
        <div class="flex-1 text-center text-14px text-white leading-20px">
          ￥{{
            item.skus.reduce((prev, sku) => {
              prev += Math.ceil((Number(sku.price) * Number(sku.discount)) / 10)
              return prev
            }, 0)
          }}
        </div>
        <div class="w-78px text-center">
          <calculate v-model="item.number" :is-combo="!!item.skuIds" />
        </div>
        <div class="flex-1 text-center color-sup font-medium">
          ￥{{
            item.skus.reduce((prev, sku) => {
              prev += Math.ceil((Number(sku.price) * Number(sku.discount)) / 10)
              return prev
            }, 0) * Number(item.number)
          }}
        </div>
        <div class="flex-1 text-center">
          <div
            class="color-white-opacity-6 text-14px leading-20px cursor-pointer"
            @click="cart.deleteCombo(item)"
          >
            删除
          </div>
        </div>
      </div>
    </div>
  </div>
  <cart-clear v-model:show="showClearCart" @on-cancel="cancel" @on-confirm="confirm" />
  <div
    v-if="badgeNumber.length > 0"
    class="fixed bottom-11px left-160px cart-col-wrapper flex h-88px w-1075px items-center px-22px bg-mask-6 justify-between"
  >
    <div>
      <n-checkbox :checked="allChecked" :indeterminate="cart.partChecked" />
    </div>
    <div class="text-14px font-weight-350 text-white ml-8px w-28px">全选</div>
    <div
      class="cursor-pointer font-weight-350px color-white-opacity-6 ml-32px w-28px"
      @click="cart.deleteSelected"
    >
      删除
    </div>
    <div
      class="cursor-pointer font-weight-350px color-white-opacity-6 ml-32px w-70px"
      @click="clear"
    >
      清空购物车
    </div>
    <div class="flex items-end flex-1 justify-end">
      <div class="text-12px text-white">已选{{ cart.totalSelectedPieces }}件，合计：</div>
      <div class="text-14px color-sup font-medium">￥</div>
      <div class="text-24px color-sup font-bold mr-10px leading-20px">{{ cart.totalPrice }}</div>
      <!-- <div class="text-12px text-white">
        共优惠 <span class="color-sup">￥{{ cart.totalDiscount }}</span>
      </div> -->
    </div>
    <div
      class="bg-main rounded-68px w-134px h-48px text-white text-center font-bold leading-48px text-22px ml-52px cursor-pointer"
      :class="{
        'opacity-80 cursor-not-allowed':
          cart.getSelectedSkus.length < 1 && cart.getSelectedComboSkus < 1
      }"
      @click="goPay"
    >
      去支付
    </div>
  </div>
  <div v-else class="flex flex-col items-center">
    <div class="mt-212px"><img :src="noProductInCart" alt="" /></div>
    <div class="text-18px color-white-opacity-8 leading-26px mt-28px">
      您的购物车还空着呢，快去逛逛吧
    </div>
    <div
      class="mt-32px bg-main w-206px h-48px text-center leading-48px rounded-100px cursor-pointer text-white"
      @click="goindex"
    >
      去逛逛
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useCartStore } from '@renderer/store/modules/cart'
import Calculate from '@renderer/components/calculate/index.vue'
import CartClear from '@renderer/components/cart/components/clear.vue'
import noProductInCart from '@renderer/assets/noProductInCart.svg'

const router = useRouter()
const cart = useCartStore()

const showClearCart = ref<boolean>(false)

const cancel = () => {
  showClearCart.value = false
}
const clear = () => {
  showClearCart.value = true
}
const confirm = () => {
  cart.clear()
  showClearCart.value = false
}
const badgeNumber = computed(() => {
  if (cart.totalPieces === 0) return ''
  if (cart.totalPieces > 99) return '99+'
  return cart.totalPieces.toString()
})

const goPay = () => {
  if (cart.getSelectedSkus.length > 0 || cart.getSelectedComboSkus.length > 0) {
    router.replace({ name: 'MallCoupon', query: { from: 'cart' } })
  }
}

const goindex = () => {
  router.replace({ name: 'Mall' })
}

const allChecked = computed({
  get: () => cart.allChecked,
  set: (v) => {
    cart.updateAllCheck(v)
    return v
  }
})
</script>

<style scoped>
.category-item-title {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
::v-deep(.n-checkbox-box) {
  --n-color-checked: #4979ff;
}
::v-deep(.n-checkbox-box__border) {
  --n-border-checked: none;
  --n-border-focus: none;
  --n-box-shadow-focus: 0 0 0 2px rgba(73, 121, 255, 0.3);
}
</style>
